<script lang="ts" setup>
const options = [
  {
    header: "多语言支持",
    description: "支持使用java、JavaScript、PHP等语言开发的网站和小程序等应用进行授权管理，同时提供多语言授权对接Demo和授权定制对接服务。",

  },
  {
    header: "多应用自主授权",
    description: "支持多应用独立授权，不同应用可分别设置授权价格，同时系统支持用户在线购买授权并自主管理授权"
  },
  {
    header: "安全/稳定/高效",
    description: "敏感接口采取信息加密和权限验证策略；后端采用nest.js开发，支持高并发请求；系统引入授权周期功能，可降低系统服务器内存、负载和流量开销。"
  },
  {
    header: "定制授权方案",
    description: "系统支持域名（单域名）和IP两种授权验证方式，可自定义过期时间。应用支持一键开启、关闭授权验证，授权支持一键冻结、解冻操作。同时还支持盗版入库。"
  }
]
</script>

<template>
  <t-row class="container">
    <t-col v-for="item in options" :key="item" :lg="3" :md="6" :sm="6" :xl="3" :xs="12">
      <t-card class="card" header-bordered>
        <template #header>
          <span class="header">{{ item.header }}</span>
        </template>
        {{ item.description }}
      </t-card>
    </t-col>

  </t-row>
</template>

<style lang="less" scoped>
.container {
  margin-top: -50px;
  padding: 0 20px;

  .card {
    margin: 15px;
    height: 200px;
    .header{
      font-size: 15px;
      font-weight: bolder;
      color: #1c6ae4;
    }
  }

}
</style>
